import dash_bootstrap_components as dbc
from dash import html, Input, Output, State
from server import app

email_input = dbc.Row(
    [
        dbc.Label("邮箱", html_for="example-email-row", width=1),
        dbc.Col(
            dbc.Input(
                type="email", id="example-email-row", placeholder="请输入正确的邮箱地址"
            ),
            width=11,
        ),
    ],
    className="mb-3",
)

password_input = dbc.Row(
    [
        dbc.Label("密码", html_for="example-password-row", width=1),
        dbc.Col(
            dbc.Input(
                type="password",
                id="example-password-row",
                placeholder="请输入密码",
            ),
            width=11,
        ),
    ],
    className="mb-3",
)

radios_input = dbc.Row(
    [
        dbc.Label("设置", html_for="example-radios-row", width=1),
        dbc.Col(
            dbc.RadioItems(
                id="example-radios-row",
                options=[
                    {"label": "记住密码", "value": 1},
                    {"label": "忘记密码", "value": 2},
                    {
                        "label": "disabled radio",
                        "value": 3,
                        "disabled": True,
                    },
                ],
            ),
            width=11,
        ),
    ],
    className="mb-3",
)

forms_html = html.Div(
    [
        html.Br(),
        html.P(html.Strong('Form: 使用Bootstrap的表单组件来控制输入组件的布局和样式', 
                           style={'color': 'rgb(255, 153, 51)'})),
        dbc.Form(
            [
                email_input, 
                password_input, 
                radios_input
            ]
        )
    ]
)